import React from 'react'
import ReactDOM from 'react-dom'

/**
 * 使用jsx创建html 元素
 * 注意事项：
 * 1. JSX必须要有一个根节点， 如果没有根节点，可以使用<></>（幽灵节点）或者<React.Fragment></React.Fragment>
 * 2. 所有标签必须结束，如果是单标签可以使用/>结束
 * 3. JSX中语法更接近与JavaScript，属性名采用驼峰命名法
 * 4. class ===> className  for ===>  htmlFor
 * 5. JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止 JS 自动插入分号的 bug
 */
const ul = (<>
  <p>
    <label htmlFor="cb">勾选</label>
    <input type="checkbox" name="" id="cb" />
  </p>
  <ul className='ul'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</>)

ReactDOM.render(
  ul,
  document.getElementById('root')
)


